<script>
/**
 * @desc 在旅游路线列表里,点击一个路线详情
 */

import { mapState, mapMutations, mapActions } from 'vuex'
import { navTo } from '@/utils'
import TravelBanner from './travel-detail-banner'
import ProductDetail from './tab-contents/product-details'
import CostDescription from './tab-contents/cost-description'
import PurchaseNote from './tab-contents/purchase-notice'
import TravelRoute from './tab-contents/travel-route'
import BottomMenu from './travel-detail-bottom-menu'

export default {
  name: 'travel-list',
  components: {
    TravelBanner,
    ProductDetail,
    CostDescription,
    PurchaseNote,
    TravelRoute,
    BottomMenu
  },
  data: () => ({
    // 实现滚动 tabs 贴顶效果
    eleOffsetTop: 0,
    showFixedTabs: false,
    toView: '',
    tabs: [
      { id: 'tab-1', text: '产品详情' },
      { id: 'tab-2', text: '费用说明' },
      { id: 'tab-3', text: '购买须知' },
      { id: 'tab-4', text: '行程路线' }
    ],
    currTab: { id: 'tab-1', text: '产品详情' },
    data: [],

    // 子组件跟路由页面组件一起被卸载,导致数据无法更新,需要手动卸载
    mountPackageSelect: true,
    showPackageSelect: false,
    showLoading: false
  }),

  computed: { ...mapState('Order', { travelDetail: state => state.currTravelDetail }) },

  methods: {
    navTo,
    ...mapMutations('Order', ['setState']),
    ...mapActions('Order', ['getTravelDetail']),
    handleScroll(e) {
      if (e.mp && e.mp.detail) {
        // 这里不使用computed,否则很卡
        const showFixedTabs = e.mp.detail.scrollTop >= this.eleOffsetTop
        if (this.showFixedTabs !== showFixedTabs) {
          this.showFixedTabs = showFixedTabs
        }
      }
    },

    handleTabClick(id) {
      this.currTab = this.tabs.find(v => v.id === id)
      // 滚动到指定位置;toView如果为空,不会一直更新位置,需要在滚动后,设置为空
      this.toView = 'tabs'
      const t = setTimeout(() => {
        this.toView = null
        clearTimeout(t)
      }, 100)
    }
  },

  // wx lifeCycle
  onLoad(option) {
    this.currTab = { id: 'tab-1', text: '产品详情' }
    this.showFixedTabs = false
    // loading
    wx.showLoading({ title: '加载中', mask: true })
    this.getTravelDetail(option.id).finally(() => wx.hideLoading())
  },

  onReady() {
    // 获取tabs的offsetTop
    const ele = wx.createSelectorQuery()
    ele
      .select('#tabs')
      .boundingClientRect()
      .exec(res => {
        this.eleOffsetTop = res[0] ? res[0].top : 0
      })
  }
}
</script>

<template>
  <div class="travel-detail">
    <scroll-view
      scroll-y
      :scroll-into-view="toView"
      @scroll="handleScroll"
      class="scroll-view"
    >
      <!-- banner -->
      <travel-banner :picture="travelDetail.picture"/>

      <!-- tabs -->
      <div id="tabs" class="tabs">
        <span
          v-for="t in tabs"
          :key="t.id"
          class="tab"
          :class="{'active':t.id===currTab.id}"
          @click="handleTabClick(t.id)"
        >{{t.text}}</span>
      </div>

      <!-- 映射的tabs -->
      <div class="tabs fixed" :class="{'show':showFixedTabs}">
        <span
          v-for="t in tabs"
          :key="t.id"
          class="tab"
          :class="{'active':t.id===currTab.id}"
          @click="handleTabClick(t.id)"
        >{{t.text}}</span>
      </div>

      <div class="content-container">
        <product-detail v-if="currTab.id==='tab-1'" :data="travelDetail" />
        <cost-description v-if="currTab.id==='tab-2'" :data="travelDetail.costExplain"/>
        <purchase-note v-if="currTab.id==='tab-3'" :data="travelDetail.buyInfo" />
        <travel-route v-if="currTab.id==='tab-4'" :data="travelDetail.schedules" />
      </div>
    </scroll-view>

    <!-- 底部按钮菜单 -->
    <bottom-menu />
  </div>
</template>

<style lang="scss" scoped>
@import './styles.scss';
</style>
